<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 登陆表单 -->
            <el-form class="login_form" :model="loginForm" ref="loginFormRef">
                <el-form-item label="管理员" prop="username">
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.username">
                    </el-input>
                </el-form-item>
                <el-form-item label="密  码" prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item class="login_btns">
                    <el-button type="primary" @click="login">登陆</el-button>
                </el-form-item>
            </el-form>
            <router-link to="/userlogin">前往购物商城登陆</router-link>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                username: "admin",
                password: "123456",
            },
        }
    },
    mounted(){

    
    },
    methods:{
        async login(){
           const result=await this.$http.post('/login',
          {username:this.loginForm.username,password:this.loginForm.password},
           )
           if(result.code!==200) return this.$message.error('登录失败 账号或密码错误！')
           
           this.$router.push('/home')
           this.$message.success('登录成功')

        },

    }
}    
</script>
<style scoped>
.login_container {
  background: #2b4b6b;
  height: 100%;
  position: relative;
}
.login_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 350px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
}
.login_form {
  margin-top: 50px;
  padding: 0 20px;
}
.login_btns {
  margin-left: 180px;
}
</style>